<template>
    <div class="search">
    <input type="text" class="input" v-model="keyword" :v-on="input()" placeholder="搜索资源">
    <a href="/#/searchContent" class="iconfont" @click="input()">&#xe6d1;</a>


    <div class="choose">
        <input type="radio" name="kinds" class="kinds" v-model="kinds" id="kind">搜博客
        <input type="radio" name="kinds" class="kinds" v-model="kindv">搜视频
        <input type="radio" name="kinds" class="kinds" v-model="kindb">搜书籍
    </div>
    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import {EventBus} from '../../../../../static/js/eventBus'
export default {
  name: 'search',
  data () {
    return {
      keyword: '',
      kind: 0,

      kinds: '',
      kindv: '',
      kindb: '',
      List: [],
      page: 1,
    }
  },

  methods: {
    input() {
      if (this.kindb != "") {
        this.kind = 2

        this.kindb = ""
      } else if (this.kindv != "") {
        this.kind = 1

        this.kindv = ""
      } else if (this.kinds != "") {
        this.kind = 0

        this.kinds = ""
      }

      let postData = qs.stringify({
        option: this.kind,
        info: this.keyword,
        page: this.page,
      })
      // console.log(postData)

      axios.post('/api/select', postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        this.List = response.data
        // console.log(response.data)
        // console.log(this.List)
        EventBus.$emit('list',this.List);
        EventBus.$emit('kind',this.kind);
        EventBus.$emit('keyword',this.keyword);
        // console.log(this.keyword)
        // console.log(this.kind)
      })

    },

  },

  mounted () {
    document.getElementById("kind").checked = true

    EventBus.$on('newpage',(page) => {
      this.page = page;
      // console.log(this.page)
    })

    if (this.kindb != "") {
        this.kind = 2

        this.kindb = ""
      } else if (this.kindv != "") {
        this.kind = 1

        this.kindv = ""
      } else if (this.kinds != "") {
        this.kind = 0

        this.kinds = ""
      }

      let postData = qs.stringify({
        option: this.kind,
        info: this.keyword,
        page: this.page,
      })
      // console.log(postData)

      axios.post('/api/select', postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        this.List = response.data
        // console.log(response.data)
        // console.log(this.List)
        EventBus.$emit('list',this.List);
        EventBus.$emit('kind',this.kind);
        
        // console.log(this.kind)
      })

  },

}
</script>

<style lang="stylus" scoped>
.search
  display inline-block
  position fixed
  width 22%
  margin-left 25%
  height 4rem
  //background-color red
  .input
    width 100%
    line-height 1.5rem
    margin-top .5rem
    margin-left .3rem
    text-indent .5rem
    border-radius 1rem
    border .05rem #ccc solid
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  a
    position absolute 
    left 90%
    top .5rem
    font-size 1.3rem
    color #26a2ff
  button
    width 15%
    line-height 1.5rem
    margin-top .5rem
    margin-left -.25rem
    color #fff
    font-size 1.5rem
    border .05rem #666 solid
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #26a2ff
    // background-color skyblue
    // background-color black
  .choose
    width 100%
    line-height 1.5rem
    font-size .8rem
    margin-top .3rem
    color #333
    // background-color red
    .kinds
      display inline-block
      width 15%
      margin-left 1%

      
</style>
